<template>
  <el-cascader
    v-model="selectedValue"
    :options="options"
    :props="cascaderProps"
    check-strictly
    :show-all-levels="showAllLevels"
    placeholder="请选择"
    @change="handleChange"
  />
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'CascaderComponent',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      required: true
    },
    showAllLevels: {
      type: Boolean,
      default: false
    },
    cascaderProps: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    console.log(props.options)
    const selectedValue = ref(props.modelValue)
    watch(
      () => props.modelValue,
      (newValue) => {
        selectedValue.value = newValue
      }
    )

    const handleChange = (value) => {
      console.log(value)
      emit('update:modelValue', value)
      emit('change', value)
    }

    return {
      selectedValue,
      handleChange
    }
  }
}
</script>
